<template>
	<view class="content">
		<view class="" style="position:fixed;z-index:0;background-color: #007AFF;width: 100%;height: 100%;">
			<image style="width: 100%;height: 100%;" src="../static/images/barang.png" mode=""></image>
		</view>
		<view class="content_box">
			<image class="tiptext" src="../static/images/GO_3.png" mode=""></image>
			<!-- <view class="luck_draw"v-if="number <= 0">
				获取抽奖机会
			</view> -->
			<view class="luck_draw">
				 <!-- v-if="number > 0" -->
				剩余{{number}}次抽奖机会
			</view>			
			<view class="luck_box">
				<!-- :style="{border:(index==1?border:'')}" -->
				<view class="luck_item luck_item_type" :class="[(index==1) ? 'active' : '']" >
					<view class="luck_item_luck1">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[0].icon" mode=""></image>
						 
					</view>
					<text>{{array[0].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type1" :class="[(index==2) ? 'active' : '']">
					<view class="luck_item_luck2">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[1].icon" mode=""></image>
						 
						
					</view>
					<text>{{array[1].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type" :class="[(index==3) ? 'active' : '']">
					<view class="luck_item_luck1">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[2].icon" mode=""></image>
						
					</view>
					<text>{{array[2].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type1" :class="[(index==4) ? 'active' : '']">
					<view class="luck_item_luck3">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[3].icon" mode=""></image>
						
					</view>
					<text>{{array[3].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type" @click="startLuck()">
					<view class="luck_item_luck4">
						<image src="../static/images/GO_4.png" mode=""></image>
					</view>
				</view>
				<view class="luck_item luck_item_type1" :class="[(index==5) ? 'active' : '']">
					<view class="luck_item_luck2">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[4].icon" mode=""></image>
						
					</view>
					<text>{{array[4].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type" :class="[(index==6) ? 'active' : '']">
					<view class="luck_item_luck2">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[5].icon" mode=""></image>
						
					</view>
					<text>{{array[5].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type1" :class="[(index==7) ? 'active' : '']">
					<view class="luck_item_luck1">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[6].icon" mode=""></image>						
					</view>
					<text>{{array[6].prizename}}</text>
				</view>
				<view class="luck_item luck_item_type" :class="[(index==8) ? 'active' : '']">
					<view class="luck_item_luck3">
						<image style="width: 90upx;height: 90upx;margin-top: 10upx;" :src="array[7].icon" mode=""></image>					
					</view>
					<text>{{array[7].prizename}}</text>
				</view>
			</view>
			<view style="display: none;" class="luck_text_tip">
				<marquee behavior="" direction=""><text>恭喜 樱桃小丸子同学 获得 现金红包20元 </text></marquee>				
			</view>
			<view style="text-align: center;" class="">
				<view class="luck_text_tip">		
					<view style="width: 587upx;margin-top: 10upx;height: 68upx;overflow: hidden;" class="">
						<view class="page-section-spacing">
							<swiper class="swiper1" 
								vertical="true"
								:circular="circular"
								:indicator-dots="indicatorDots"
								autoplay="true" 
								interval="4000" 
								duration="400"	>					
								<swiper-item style="line-height: 68upx;text-align: center;color: #FFFFFF;" v-for="(aa,index) in marq" :key="index">								
									{{hiddenTel(aa.member_name,2,3)}} - {{aa.prize}} - {{aa.addtime}}
								</swiper-item>		
							</swiper>				
						</view>
					</view>	
				</view>
			</view>
			<view class="activity">
				<view class="activity_1">
					<navigator url="MyPrize">我的奖品</navigator>
				</view>
				<view class="activity_line">
					|
				</view>
				<view class="activity_2">
					<navigator url="activityRules">活动规则</navigator>	
				</view>
			</view>

		</view>
		  
        <view class="luck_mask" v-if="luckHiden">			 
			<view class="luck_mask_box">
				<view class="top">
					<image src="../static/images/luck_top.png" mode=""></image>
				</view>
				<view :class="[(array[returnnum].receivetype == 0) ? 'luck_mask_content1' : 'luck_mask_content2']" class="luck_mask_content">
					<image  style="width: 300upx;height: 300upx;margin-top: 40upx;margin-left: 10upx;border-radius: 15upx;" :src="array[returnnum].icon" mode=""></image>				
					<image class="img2" src="../static/images/luck_cloer.png" mode="" @click="hidemask"></image>			
					<view class="" style="text-align: center; margin-top: 50rpx; font-size: 40rpx;color:rgb(224, 129, 129);">
						<!-- {{array[returnnum].prizename}} -->
						<text v-if="array[returnnum].receivetype == 0">{{array[returnnum].prizename}}</text>
						<text v-if="array[returnnum].receivetype == 1">获得{{array[returnnum].points}}商城积分</text>
																		
						<text v-if="array[returnnum].receivetype == 2">获得{{wxrp_amount}}元 红包</text>
																	
						<text v-if="array[returnnum].receivetype == 3">获得 {{array[returnnum].goods_name}}</text>	
						
						<text v-if="array[returnnum].receivetype == 4">获得 代金券 一张</text>	
						
					</view>	
					<view v-if="array[returnnum].receivetype == 3" style="margin-top: 90upx;" class="useOntime" @click.stop="TosetAdd">
						 添加收货地址
					</view>		
							<view v-if="array[returnnum].receivetype == 4" style="margin-top: 90upx;" class="useOntime" @click.stop="gotTicket">
								 立即使用
							</view>	
				</view>
		 				
			</view>        	
        </view>
		<uni-popup style="z-index: 999999999;" ref="popup0" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: -34px" src="../static/images/close.png" mode=""></image>
				<image @click.stop style="width: 450upx;height: 560upx;" src="../static/images/surprise0xxhg.png" mode=""></image>
				<view class="useOntime" @click.stop="closeModal">
					 再来一次
				</view>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup1" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>
				<!-- <image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="img2" mode=""></image> -->
				<view style="position: relative;margin-top: -200upx;color:#ff6c00;font-size: 36upx;" class="tac">				
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 {{point}} 商城积分
				</view>
				<view style="position: relative;margin-top: 20upx;color:#999999;font-size:27upx;" class="tac">						
					请在 商城积分 中查看
				</view>
				<view class="useOntime">
					 <navigator url="../shopgold/gouwujinLis">立即使用</navigator>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup2" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>
				<!-- <image style="position: absolute;top: 200px;left: 71px;z-index: 9999999999999999999999999999999999;width: 150upx;height: 150upx;" :src="img2" mode=""></image> -->
				<view style="color: #ff6c00;position: absolute;font-size: 36upx;top: 406upx;width: 100%;height: 60upx;text-align: center;" class="">

				</view>
				<view style="position: relative;margin-top: -180upx;color:#ff6c00;font-size: 36upx;" class="tac">
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 {{point}}元 购物红包
				</view>
				<view style="color:#999999;font-size:27upx;" class="tac">						
					请在 我的-积分商城 中查看
				</view>
			</view>
		</uni-popup>
		
		<uni-popup style="z-index: 999999999;" ref="popup3" type="center">
			<view style="position: relative;" class="">
				<image @click.stop="closeModal" style="width: 48upx;height: 48upx;position: absolute;left: 436upx;top: 156upx" src="../static/images/close.png" mode=""></image>
				<image style="width: 450upx;height: 740upx;" src="../static/images/surprise11.png" mode=""></image>				    
				<view style="position: relative;margin-top: -200upx;color:#ff6c00;font-size: 36upx;" class="tac">
					恭喜你
				</view>
				<view style="position: relative;margin-top: -20upx;color:#ff6c00;font-size: 36upx;" class="tac">						
					获得 商品 1件
				</view>				
				<view style="margin-top: 90upx;" class="useOntime" @click.stop="TosetAdd">
					 添加收货地址
				</view>
			</view>		
		</uni-popup>
		
		
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	// #ifdef H5
		const share = require("@/store/share.js")
	// #endif
	export default {
		components:{
			uniPopup
		},
		data() {
			return {
				voucher:{},
				point:"",
				lid:"",
				prize_level:"",
				returnnum:"",
				prizeType:0,
				luckNuber:0,
				array:[],
				id:0,
				indicatorDots:false,
				circular:true,
				marq:[],
				

				// 默认为选中1
				index: 1,
				// 选中样式
				border: "4upx solid #ff99bd",
				//抽奖次数
				number: 10,
				//9张奖品图片
				imagesTextArr: [{}],
				//中奖位置
				luckPosition: 1,
				// 旋转次数
				luck_Router:3,
				max: 8,
				speed:300,
				start:true,
				luckHiden:false,
				isDisable:false,
				consumePoint:"",
				wxrp_amount:"",
				aid:"",
				info:""
			}
		},
		onLoad(options) {
			this.id=options.id
			
			this.getInfo();
			this.getfrequency()
			if(options.lid&&options.aid){
				this.lid=options.lid;
				this.aid=options.aid;
				this.setadderss();
			}
		},
		methods: {
			gotTicket(){//立即使用优惠券
				let store_id = this.voucher.voucher_t_store_id
				let voucher_t_range =this.voucher.voucher_t_range
				let voucher_t_rangeid =this.voucher.voucher_t_rangeid
				let gc_name =this.voucher.gc_name
				console.log(store_id,voucher_t_range,voucher_t_rangeid,gc_name)
				var that=this	
				if(voucher_t_range==0){
					if(store_id){
						uni.navigateTo({
							url:"/mall/store/store?store_id="+store_id
						})
					}else{
						uni.switchTab({
							url:"/main/home/index"
						})
					}
					
				}else if(voucher_t_range==1){//商品
				if(this.voucher.is_more_goods==1){
					uni.navigateTo({
						url:'/operation/voucher/productsLists?voucher_t_id='+this.voucher.voucher_t_id
					})
				}else{
					if(voucher_t_rangeid){
						uni.navigateTo({
							url:"/mall/goods/info?goods_id="+voucher_t_rangeid.split(",")[0]
						})
					}
				}
					// if(voucher_t_rangeid){
					// 	uni.navigateTo({
					// 		url:"/pages/distribution/shopInfo?goods_id="+voucher_t_rangeid.split(",")[0]
					// 	})
					// }
			
				}else if(voucher_t_range==2){//分类
					uni.navigateTo({
						url:"/mall/goods/list?thirdid="+voucher_t_rangeid+"&index="+gc_name
					})
				}
			
			},
			TosetAdd(){//去选择地址
				uni.navigateTo({
					url:"/member/address/list?type=nineBoxs&lid="+this.lid+"&id="+this.id
				})			
			},
			setadderss(){//设置收货地址
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=sendinfo_save',
					method: 'post',
					data: {
						lid:this.lid,
						aid:this.aid,
					},
				}).then((res)=> {
					if(res.error_code==0){
						uni.showToast({
							title:"设置成功",
							icon:"none"
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
				})
			},
			toaddress(){
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=index',
					method: 'get',
					data: {
						"lid":this.lid
					},
				}).then((res)=> {
					if(res.error_code == 0){
						uni.navigateTo({
							url:"activeAddress?lid="+this.lid
						})						
					}
				})
				
			},
			hiddenTel(str,frontLen,endLen) {
				// return false
			   var len = str.length-frontLen-endLen;
			   var xing = '';
			   for (var i=0;i<len;i++) {
			   xing='***';
			  }
			   return str.substring(0,frontLen)+xing+str.substring(str.length-endLen);
			},
			getInfo(){//获取页面信息
				//九宫格数据
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=index',
					method: 'get',
					data: {"id":this.id},
				}).then((res)=> {
					if(res.error_code == 0 && res.datas.info.activity_type == 2){
						this.consumePoint=res.datas.info.consumePoint
						this.array =res.datas.info.items
						console.log(this.array)
						this.id=res.datas.info.id
						this.info =res.datas.info
						// #ifdef H5
							let shareInfo={
								title: this.info.bigwheel_title , // 分享标题
								desc: this.info.share_desc, // 分享描述  
								link:  this.$share+"/#/operation/prize/nineBoxs?id="+this.id, // 分享链接  
								imgUrl: this.info.share_img, // 分享图标       
							}
								share.share(shareInfo)
						// #endif
						//中奖纪录
						this.$util.request({
							url: '/mobile/index.php?act=bigwheel&op=prizeLog',
							method: 'post',
							data: {
								"id":this.id
							},
						}).then((res2)=> {
							this.marq=res2.datas.list
						})
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
							duration:2000
						})
						// setTimeout(()=>{
						// 	uni.navigateBack({
						// 		delta:1
						// 	})
						// },1000)
					}
				})
			},
			getfrequency(){//获取会员剩余抽奖次数
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=canDrawCount',
					method: 'get',
					data: {
						"id":this.id
					},
				}).then((res)=> {
					this.number=res.message.left_count
				});
			},		
			
			
			//进入页面时缓慢切换
			//随机中奖数，旋转次数，速度
			loadAnimation: function(luckNuber,luck_Router,speed) {			
					// console.log(luckNuber,luck_Router,speed)
					let that = this;
					//初始位置为0 
					var i = 1;
					//每1秒钟切换一次位
					let setInterval1=setInterval(function(){
					if(i>8){
						i=1;
						that.index = i;
						--luck_Router;
					}else{
						that.index = i;
					}
					//结束
					// console.log(luck_Router==0&&i==luckNuber,luck_Router)
					if(luck_Router == 1 && i == luckNuber){
						clearInterval(setInterval1);
						setTimeout(()=>{
							that.isDisable=false
							that.luckHiden=true;
						},1200)
						console.log(this.prizeType)
						 // if(this.prizeType == 0){
							// this.$refs.popup0.open();
						 // }
						 // if(this.prizeType == 1){
						 // 	this.$refs.popup1.open();
						 // }
						 // if(this.prizeType == 2){
						 // 	this.$refs.popup2.open();
						 // }
						 // if(this.prizeType == 3){
						 // 	this.$refs.popup3.open();
						 // }
					}
					i++;
				}, that.speed);
			},
			startLuck() {
				let that = this;
				// if(this.number<=0){
				// 	uni.showToast({
				// 		title:"没有抽奖机会",
				// 		icon:"none"
				// 	})
				// 	return false
				// }
				if(this.isDisable){
					return false;
				}
				this.isDisable=true
				
				if(this.number<=0&& Number(this.consumePoint) && this.info.is_order_draw!=1){
					uni.showModal({
						title:'提示',
						content:'是否使用'+this.consumePoint+'积分进行抽奖',
						success: (res2) => {
							if(res2.confirm){
								this.draw();
							}else if(res2.cancel){
								return false
							}
						}
					})
				}else{
					this.draw();
				}
				
			},
			draw(){
				let that=this
				this.$util.request({
					url: '/mobile/index.php?act=bigwheel&op=prize_num',
					method: 'post',
					data: {
						"id":this.id
					},
				}).then((res)=> {
					if(res.error_code == 0){
						// uni.showToast({
						// 	title:"抽奖中",
						// 	icon:"loading",
						// 	duration:3000
						// })
						this.voucher=res.message.voucher
						if(this.number>0){
							this.number--;
						}
						this.lid=res.message.lid
						this.luckNuber=res.message.prize_level+1
						this.returnnum=res.message.prize_level
					
						this.prizeType=this.array[this.luckNuber-1].receivetype
						if(res.message.prize_type==2){
							this.wxrp_amount=res.message.wxrp_amount
						}
						this.loadAnimation(this.luckNuber,2,that.speed);
						
					}else{
						this.isDisable=false
						uni.showToast({
							title:res.message,
							icon:"none"
						})
					}
					
				})	
			},
			hidemask(){
				this.isDisable=false
				this.luckHiden=false;
				
			}
		}
	}
</script>

<style>
	.luck_bnt{
/*  background-image: -moz-linear-gradient( 90deg, rgb(225,120,237) 0%, rgb(174,136,255) 100%);
  background-image: -webkit-linear-gradient( 90deg, rgb(225,120,237) 0%, rgb(174,136,255) 100%);
  background-image: -ms-linear-gradient( 90deg, rgb(225,120,237) 0%, rgb(174,136,255) 100%);
  box-shadow: 0px 21px 22.8px 1.2px rgba(193, 21, 41, 0.16);
 */

  width: 304upx;
  height: 83upx;
  line-height: 83rpx;
  color: #FFFFFF;
  z-index: 157;
  margin: auto;
  font-size: 32rpx;
  margin-top: 100rpx;
  border-radius:50rpx ;
  
}
.luck_mask_box{
	width: 100%;
}
.luck_mask_content{
	position: relative;
	height:550upx;
	width:440rpx;
	background:url(../static/images/luck_ok1ss.png) center no-repeat;
	background-size:cover ;
	margin: auto;
	margin-top: 100rpx;
	
}
	.luck_mask{
		position: fixed;
		width: 100%;
		background-color: rgba(0,0,0,0.4);
		height: 100%;
		top: 0;
		z-index: 99;
		display: flex;
		transition: 0.5s;
	
	
		
	}
	.luck_mask .top{
	/* 	position: absolute;
		left: 0px;
		top: 200rpx;
		right: 0px; */
		    position: relative;
		    top: 200rpx;
	
		
	}
	.luck_mask .top image{
		width: 289rpx;
		height: 300rpx;
	}
	.borderactive {
		border: 4upx solid #ff99bd;
	}
	.img1{
		height:124upx ;
		width: 283upx;
	
		margin: auto;
			margin-top: 200rpx;
	}
	.img2{
		height: 45rpx;
		width: 45rpx;
		position: absolute;
		right: 0px;
		top: -62upx;
	}

	uni-page-body,
	uni-page-refresh {
		height: 100%;
	}

	.content {
		display: flex;
		height: 100%;
		height: 100%;
		text-align: center;
	}

	.content_box {
		/* background: url(../../static/images/barang.png); */
		background-size: cover;
		background-repeat: no-repeat;
		height: 100%;
		width: 100%;
		position: relative;
		z-index: 10;
	}

	.tiptext {
		width: 534rpx;
		height: 108rpx;
		text-align: center;
		z-index: 18;
		margin-top: 108rpx;
	}

	.luck_draw {
		font-size: 32upx;

		background-image: -moz-linear-gradient(90deg, rgb(225, 120, 237) 0%, rgb(174, 136, 255) 100%);
		background-image: -webkit-linear-gradient(90deg, rgb(225, 120, 237) 0%, rgb(174, 136, 255) 100%);
		background-image: -ms-linear-gradient(90deg, rgb(225, 120, 237) 0%, rgb(174, 136, 255) 100%);
		box-shadow: 0px 21px 22.8px 1.2px rgba(193, 21, 41, 0.16);
		width: 304upx;
		height: 83upx;
		line-height: 83upx;
		border-radius: 50upx;
		margin: auto;
		font-family: "PingFang";
		color: rgb(255, 255, 255);
		margin-bottom: 60upx;
		position: relative;
		z-index: 100;
	}

	.luck_box {
		border-radius: 25upx;
		width: 534upx;
		height: 528upx;
		z-index: 44;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		padding: 10upx;
		justify-content: space-between;
		background-image: -moz-linear-gradient(45deg, #ae88ff 0%, #ed9de3 100%);
		background-image: -webkit-linear-gradient(45deg, #ae88ff 0%, #ed9de3 100%);
		background-image: -ms-linear-gradient(45deg, #ae88ff 0%, #ed9de3 100%);
	}

	.luck_item {
		margin: auto;
		position: relative;
		border-radius: 25upx;
		box-shadow: 0px 21px 22.8px 1.2px rgba(193, 21, 41, 0.16);
		width: 146upx;
		height: 146upx;
		padding: 4rpx;
		border: 2px solid transparent;
		background: #fff;

	}

	.luck_item image {
		margin-top: 40rpx;
	}

	.luck_item_type {
		background-color: rgb(255, 255, 255);
	}

	.luck_item text {
		font-size: 24upx;
		font-family: "PingFang";
		color: rgb(174, 136, 255);
		text-align: center;
		z-index: 63;
		position: absolute;
		left: 0px;
		right: 0rpx;
		bottom: 10rpx;
		width: 100%;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.luck_item_luck1 image {
		height: 50upx;
		width: 50upx;
	}

	.luck_item_luck2 image {
		height: 30upx;
		width: 50upx;
	}

	.luck_item_luck3 image {
		width: 50rpx;
		height: 58rpx;
	}

	.luck_item_luck4 {
		/* display: flex;
		align-items: center;
		justify-content: center; */
		height: 100%;
		width: 100%;	
		padding: 0 !important;


	}

	.luck_item_luck4 image {
		width: 102%;
		height: 100%;
		transform: translate(4upx,-40upx) scale(1.2);
		
		
		

	}

	.activity {
		width: 440rpx;
		font-size: 32upx;
		color: rgb(255, 255, 255);
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* margin: auto;
		margin-top: 116rpx; */
		position: fixed;
		bottom: 60rpx;
		left: 50%;
		margin-left: -220rpx;


	}

	.luck_text_tip {

		background-color: rgba(255, 255, 255, 0.2);

		width: 587rpx;
		height: 66rpx;
		line-height: 66rpx;
		margin: auto;
		border-radius: 40rpx;
		margin-top: 70rpx;
	}

	.luck_text_tip text {
		font-size: 30upx;
		color: #FFFFFF;


	}
	.bgc{
		background-color: #f7d6f8;
	}
	.active{
		background-color: #f7d6f8;
		border: 4upx solid #f00;
	}
	.useOntime{
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 100upx;
		height: 100upx;
		width:250upx;
		border-radius: 50upx;
		background-image: -webkit-linear-gradient(#fc6a75, #fe659a);
		font-weight: bold;
		margin: 40upx auto;
	}
</style>
